<!DOCTYPE html>

<html>

<head>
  <!-- 页面meta -->

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>后台管理</title>

  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

  <!-- 引入样式 -->

  <link rel="stylesheet" href="../plugins/elementui/index.css">

  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="../css/mystyle.css">
  <!-- 引入组件库 -->

  <script src="../js/vue.js"></script>

  <script src="../plugins/elementui/index.js"></script>

  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <script src="../js/axios-0.18.0.js"></script>

  <script src="../http/request.js"></script>


</head>

<body class="hold-transition">
  <div id="app">
    <div class="app-container">
      <div class="box">

        <div class="filter-container">

          <el-input placeholder="用户手机号" v-model="pagination.queryString" style="width: 200px; margin-right: 20px;"
            class="filter-item"></el-input>

          <el-button @click="getByPhone()" type="primary" class="dalfBut">查询</el-button>

        </div>

        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

          <el-table-column prop="withdrawId" type="index" align="center" label="序号"></el-table-column>

          <el-table-column prop="phone" label="用户电话号" align="center"></el-table-column>

          <el-table-column prop="userMoney" label="用户余额" align="center"></el-table-column>

          <!-- 跑跑币-->
          <el-table-column prop="withdrawMoney" label="提现金额" align="center"></el-table-column>

          <el-table-column prop="withdrawDate" label="提现时间" align="center"></el-table-column>

          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? '已审核' : '未审核' }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">

            <template slot-scope="scope">

              <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">审核</el-button>

              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

            </template>

          </el-table-column>

        </el-table>

        <!-- 编辑标签弹层 -->

        <div class="add-form">

          <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

              <el-row>

                <el-col :span="12">
                  <el-form-item label="用户电话" prop="phone">
                    <el-input v-model="formData.phone" />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="用户余额">
                    <el-input v-model="formData.userMoney" type="address"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="提现金额">
                    <el-input v-model="formData.withdrawMoney" type="address"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="提现时间">
                    <el-input v-model="formData.withdrawDate" type="address"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="审核状态">
                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="0">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
              <el-button type="primary" @click="handleEdit()">审核完毕</el-button>
            </div>
            <el-row>
              <span style="color: red;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用说明：审核完毕后点击审核完毕，请确保钱已经交给用户</span>
          </el-row>
          </el-dialog>

        </div>

      </div>

    </div>

  </div>

</body>



<script>
  var vue = new Vue({

    el: '#app',
    data: {
      pagination: {},
      dataList: [],//当前页要展示的列表数据
      formData: {},//表单数据
      dialogFormVisible: false,//控制表单是否可见
      dialogFormVisible4Edit: false,//编辑表单是否可见
      rules: {//校验规则
        type: [{ required: true, message: '帮手类别为必填项', trigger: 'blur' }],
        name: [{ required: true, message: '帮手电话号为必填项', trigger: 'blur' }]
      }
    },

    //钩子函数，VUE对象初始化完成后自动执行
    mounted() {
      this.getAll();
    },
    methods: {
      //列表
      getAll() {
        //发送ajax请求
        axios.get("/money/check/All").then((res) => {
          // console.log(res.data)
          this.dataList = res.data;
          // console.log("dataList" + JSON.stringify(this.dataList))
        });
      },

      //根据手机号查询
      getByPhone() {
        //发送ajax请求
        axios.get("/money/check/phone?phone=" + this.pagination.queryString).then((res) => {
          console.log(this.pagination.queryString)
          console.log(res)
          this.dataList = res.data;
        });
      },

      //弹出编辑窗口
      handleUpdate(row) {
        // console.log(row);   //row.id 查询条件
        //查询数据，根据id查询
        axios.get("/money/check/one?id=" + row.withdrawId).then((res) => {
          // console.log("formdata" + JSON.stringify(this.formData))
          // console.log(res.data.data);
          // console.log(res.data)
          if (res.code === 1) {
            // console.log(res)
            //展示弹层，加载数据
            this.dialogFormVisible4Edit = true;
            this.formData = res.data;
          } else {
            this.$message.error(res.msg);
          }
        });
      },

      // 删除
      handleDelete(row) {
        //1.弹出提示框
        this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
          type: 'info'
        }).then(() => {
          //2.做删除业务
          axios.delete(`/money/check/${row.withdrawId}`).then((res) => {
            console.log(res)
            if (res.code === 1) {
              this.$message.success("删除成功");
            } else {
              this.$message.error(res.msg);
            }
          }).finally(() => {
            this.getAll();
          });
        }).catch(() => {
          //3.取消删除
          this.$message.info("取消删除操作");
        });
      },
      // axios.put("/money/check", this.formData.withdrawId)
      //编辑
      handleEdit() {
        //发送ajax请求
        axios({
          method: 'PUT',
          url: `/money/check/${this.formData.withdrawId}`,
          // data: JSON.stringify(obj),
          // headers: {
          //   'Content-Type': 'application/json;charset=UTF-8'
          // }
          // data:{
          //   id:this.formData.withdrawId
          // }
        }).then((res) => {
          console.log(this.formData.withdrawId)
          //如果操作成功，关闭弹层，显示数据
          if (res.code === 1) {
            this.dialogFormVisible4Edit = false;
            this.$message.success("审核通过");
          } else if (res.code === 0) {
            this.$message.error(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        }).finally(() => {
          this.getAll();
        });
      },
    },
  })

</script>

</html>